<template>
  <div class="mod-tenant__tenant">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="库房设置" name="first">
        <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()" style="margin: 10px 0">
          <el-form-item>
            <el-input v-model="dataForm.code" placeholder="请输入库房编码" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="dataForm.name" placeholder="请输入库房名称" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="getDataList()">{{ $t("query") }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column label="库房编码" prop="code" header-align="center" align="center"></el-table-column>
          <el-table-column prop="name" label="库房名称" header-align="center" align="center">
            <template v-slot="scope">
              <el-button type="text" @click="showReservoirAreaLocation(scope.row)">{{ scope.row.name }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="面积" prop="area" header-align="center" align="center"></el-table-column>
          <el-table-column label="地址" prop="address" header-align="center" align="center"></el-table-column>
          <el-table-column label="密集架数" prop="intensiveNumber" header-align="center" align="center">
            <template v-slot="scope">
              <el-button type="text" @click="showList(scope.row)">{{ scope.row.intensiveNumber }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createDate" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="padding: 0px 38%" :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <set-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></set-add>

        <el-drawer title="密集架" v-model="listVisible" :size="800" close-on-press-escape="false" custom-class="rr-drawer">
          <Location :warehouseId="warehouseId"></Location>
        </el-drawer>
      </el-tab-pane>
      <el-tab-pane label="库区设置" name="second"><reservoir-area :warehouseIdArea="warehouseIdArea" /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import setAdd from "./set-add.vue";
import Location from "./location.vue";
import reservoirArea from "./reservoir-area.vue";
import { IObject } from "@/types/interface";
// import { themeSetting } from "@/constants/config";

export default defineComponent({
  components: {
    setAdd,
    Location,
    reservoirArea
  },
  setup() {
    const state = reactive({
      getDataListURL: "/archive/warehouse/page",
      getDataListIsPage: true,
      deleteURL: "/archive/warehouse",
      deleteIsBatch: true,
      listVisible: false,
      warehouseId: "",
      warehouseIdArea: "",
      activeName: "first",
      dataForm: {
        name: "",
        code: "",
        id: "",
        creator: "",
        createDate: ""
      }
    });

    return { ...useView(state), ...toRefs(state) };
  },
  provide() {
    return {
      warehouseId: this.warehouseId
    };
  },
  methods: {
    showList(row: IObject) {
      (this.listVisible = true), (this.warehouseId = row.id);
    },
    handleClick() {
      console.log(this);
    },
    showReservoirAreaLocation(row: IObject) {
      this.warehouseIdArea = row.id;
      this.activeName = "second";
    }
  }
});
</script>
<style lang="less"></style>
